<template>
  <RichEditor
    v-if="isEdit"
    v-model="computedValue"
    :import-api="importApi"
    :id="element.key"
    :element="element"
    :editor-height="element.options.height"
    :editor-width="element.options.editorWidth"
    :video-width="element.options.videoWidth"
    :video-height="element.options.videoHeight"
    :img-ratio="element.options.imgRatio"
    @change="onChange"
  />
  <div v-else class="richeditor-readonly" v-html="computedValue" />
</template>

<script>
import RichEditor from '@/components/Editor/RichEditor';
export default {
  components: { RichEditor },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    element: {
      type: Object,
      default: null
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isInDetail: { // 是否详情页展示，isDetail可能因为事件而改变，导致实际在详情页而 isDetail 为false，这个属性不会改变，详情页永远为true
      type: Boolean,
      default: false
    },
    isMiddle: { // 是否配置中
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  computed: {
    isEdit() {
      return this.isInDetail ? !this.isDetail : !this.element.options.readonly;
    },
    computedValue: {
      get() {
        if (this.element.options.readonly && (!this.value || this.value === '<p><br></p>')) {
          return '--';
        } else {
          return this.value;
        }
      },
      set(val) {
        this.$emit('changeValue', val);
      }
    }
  },
  methods: {
    onChange(val) {
      this.$emit('change', val);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
